<template>
  <div class="app-container">
    <div
      style="
        width: 100%;
        height: 5%;
        padding-left: 20px;
        padding-top: 20px;
        padding-bottom: 30px;
      "
    >
      <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    </div>
    <div class="filter-container">
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        新建
      </el-button>
      <el-button
        class="filter-item"
        type="danger"
        icon="el-icon-remove"
        @click="handleRemove"
      >
        删除
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 15px"
        type="info"
        icon="el-icon-refresh"
        @click="handleRefresh"
      >
        刷新
      </el-button>
    </div>
    <el-table
      ref="multipleTable"
      :data="list"
      row-key="id"
      stripe
      border
      tooltip-effect="light"
      style="width: 100%"
      :tree-props="{ children: 'children' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column v-if="false" align="center" prop="id" label="id" />
      <el-table-column label="序号" type="index" width="55" align="center">
        <template slot-scope="scope">
          <span>{{
            (listQuery.current - 1) * listQuery.size + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="名称"
        sortable
        width="150"
      />
      <el-table-column
        align="center"
        prop="description"
        label="说明"
        width="150"
      />
      <el-table-column
        align="center"
        prop="sqlSample"
        label="SQL示例"
        width="400"
      />
      <el-table-column align="center" prop="sqlParams" label="参数" />
      <el-table-column align="center" fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="handleClick(scope.row, false)"
            >查看</el-button
          >
          <el-button
            type="text"
            size="mini"
            @click="handleClick(scope.row, true)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleRemove(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />

    <el-dialog
      :title.sync="dialogTitle"
      :visible.sync="dialogVisible"
      width="70%"
      align="center"
      :before-close="handleClose"
    >
      <el-container style="width: 60%">
        <el-form
          ref="item"
          :rules="rules"
          style="width: 100%"
          label-position="left"
          label-width="20%"
          :model="item"
        >
          <el-form-item v-show="false" label="id">
            <el-input v-model="item.id" />
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="item.name" :disabled="!dialogEdit" />
          </el-form-item>
          <el-form-item label="父级规则">
            <el-select
              v-model="item.pid"
              :disabled="!dialogEdit"
              style="width: 100%"
            >
              <el-option
                v-for="current in list"
                :key="current.id"
                :label="current.name"
                :value="current.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="说明">
            <el-input v-model="item.description" :disabled="!dialogEdit" />
          </el-form-item>
          <el-form-item label="SQL示例">
            <el-input
              v-model="item.sqlSample"
              type="textarea"
              :disabled="!dialogEdit"
            />
          </el-form-item>
          <el-form-item label="参数">
            <el-input
              v-model="item.sqlParams"
              type="textarea"
              :disabled="!dialogEdit"
            />
          </el-form-item>
        </el-form>
      </el-container>
      <span v-if="dialogEdit" slot="footer" class="dialog-footer">
        <el-button @click="handleRefreshRule('item')">取 消</el-button>
        <el-button type="primary" @click="handleConfirm('item')"
          >确 定</el-button
        >
      </span>
      <span v-else slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { page, addOrUpdate, getTree, removes, getDetail } from "@/api/config";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import Breadcrumb from "../../../../components/QipingBreadCrumb/BreadCrumb.vue";
import { mapGetters } from "vuex";
export default {
  name: "QualityConfig",
  components: { Pagination, Breadcrumb },
  computed: {
    naviItems() {
      return [
        { text: this.equTypeName },
        { text: "数据测试" },
        { text: "质量测试" },
        { text: "规则配置" },
      ];
    },
    ...mapGetters(["equTypeName"]),
  },
  data() {
    return {
      total: 0,
      listLoading: true,
      selectionItem: [],
      dialogVisible: false,
      dialogTitle: "新增规则配置",
      dialogEdit: true,
      item: {},
      listQuery: {
        current: 1,
        size: 20,
        importance: undefined,
        title: undefined,
        type: undefined,
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
      },
      list: [],
      backList: "",
    };
  },

  created() {
    this.getList();
  },

  methods: {
    getList() {
      this.listLoading = true;
      page(this.listQuery).then((response) => {
        this.total = response.data.total;

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });

      getTree().then((response) => {
        this.list = response.data;
      });
    },

    /**
     * 单行编辑
     * @param row
     */
    handleClick(row, isEdit) {
      this.backList = JSON.stringify(this.list);
      getDetail(row.id).then((res) => {
        this.item = res.data;
      });
      this.dialogVisible = true;
      this.dialogTitle = row.name;
      this.dialogEdit = isEdit;
    },

    /**
     * 添加
     */
    handleCreate() {
      this.dialogVisible = true;
      this.dialogTitle = "新增规则配置";
      this.item = {};
      this.dialogEdit = true;
    },

    /**
     * 删除
     */
    handleRemove(index, row) {
      const data = [];
      if (row) {
        data.push(`ids=${row.id}`);
      } else {
        if (this.selectionItem.length < 1) return;
        this.selectionItem.forEach((item) => {
          data.push(`ids=${item.id}`);
        });
      }
      removes(data.join("&")).then((response) => {
        this.getList();
      });
    },

    /**
     * 刷新
     */
    handleRefresh() {
      this.getList();
    },

    /**
     * 多选行
     * @param rows
     */
    handleSelectionChange(rows) {
      this.selectionItem = rows;
    },

    /**
     * dialog关闭
     * @param done
     */
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          // done();
          this.dialogVisible = false;
          this.list = JSON.parse(this.backList);
        })
        .catch((_) => {});
    },

    handleConfirm(formName) {
      this.listLoading = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addOrUpdate(this.item)
            .then()
            .then((response) => {
              this.dialogVisible = false;
              this.getList();

              // Just to simulate the time of the request
              setTimeout(() => {
                this.listLoading = false;
              }, 1.5 * 1000);
            });
        } else {
          return false;
        }
      });
    },

    handleRefreshRule(formName) {
      this.dialogVisible = false;
      this.list = JSON.parse(this.backList);
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
</style>
